<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import {
  addSpaceUsingPost,
  getSpaceVoByIdUsingGet,
  listSpaceLevelUsingGet,
  updateSpaceByAdminUsingPost,
} from '@/api/spaceController.ts'
import { SPACE_LEVEL_OPTIONS, SPACE_TYPE_ENUM, SPACE_TYPE_MAP } from '@/constants/space.ts'
import { formatSize } from '@/util'

const loading = ref(false)
const space = ref<API.SpaceVO>({})
const spaceForm = reactive<API.SpaceAddReq | API.SpaceEditReq>({
  spaceLevel: 0,
})
const router = useRouter()
const route = useRoute()
const spaceType = computed(() => {
  if (route.query?.type) {
    return Number(route.query.type)
  }
  return SPACE_TYPE_ENUM.PRIVATE
})
const handleSubmit = async (values: any) => {
  loading.value = true
  let spaceId = space.value.id
  let res
  try {
    if (spaceId) {
      // 更新
      res = await updateSpaceByAdminUsingPost({
        id: spaceId,
        ...values,
      })
      message.success('空间更新成功')
    } else {
      // 创建
      res = await addSpaceUsingPost({
        spaceType: spaceType.value,
        ...values,
      })
      message.success('空间创建成功')
      spaceId = res.data
    }
    loading.value = false
    router.push({ path: `/space/${spaceId}` })
  } catch (e) {
    loading.value = false
  }
}
const spaceLevelList = ref<API.SpaceLevel[]>([])
const fetchSpaceLevelList = async () => {
  const res = await listSpaceLevelUsingGet()
  spaceLevelList.value = res.data
}
const getSpaceInfo = async () => {
  const spaceId = route.query?.id as string
  if (spaceId) {
    const res = await getSpaceVoByIdUsingGet({ id: spaceId })
    const data = res?.data
    space.value = data
    spaceForm.spaceName = data.spaceName
    spaceForm.spaceLevel = data.spaceLevel
  }
}

onMounted(() => {
  // getspaceInfo()
  fetchSpaceLevelList()
  getSpaceInfo()
})
</script>

<template>
  <div id="addspace">
    <a-flex justify="space-between">
      <div style="width: 50%">
        <h2 style="margin-bottom: 16px">
          {{ route.query.id ? '编辑' : '创建' }} {{ SPACE_TYPE_MAP[spaceType] }}
        </h2>
        <a-form layout="vertical" :model="spaceForm" @finish="handleSubmit" class="searchForm">
          <a-form-item name="spaceName" label="空间名称">
            <a-input v-model:value="spaceForm.spaceName" placeholder="空间名称" allowClear />
          </a-form-item>
          <a-form-item name="spaceLevel" label="空间级别">
            <a-select
              v-model:value="spaceForm.spaceLevel"
              placeholder="请选择空间级别"
              :options="SPACE_LEVEL_OPTIONS"
              allow-clear
              style="width: 150px"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" style="width: 100%" :loading="loading">
              {{ route.query.id ? '更新' : '创建' }}
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <!--空间级别介绍 -->
      <a-card title="空间级别介绍">
        <a-typography-paragraph> 目前仅支持普通版空间</a-typography-paragraph>
        <a-typography-paragraph v-for="spaceLevel in spaceLevelList" :key="spaceLevel.value">
          {{ spaceLevel.name }}: 大小{{ formatSize(spaceLevel.maxSize) }}, 数量{{
            spaceLevel.maxCount
          }}
        </a-typography-paragraph>
      </a-card>
    </a-flex>
  </div>
</template>

<style scoped>
#addspace {
  max-width: 720px;
  margin: 0 auto;
}
</style>
